<template>
	<!-- 注销账户 -->
	<view class="content">
		<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/0d19fc8f-d1c0-411e-8a3d-e50ad4ebc70c.png" mode="scaleToFill"></image>
		<span>是否确认注销账号：{{phoneNum}}?</span>
		<span>注销后，该账号内所有信息都将被全部删除清空</span>
		<span>且该操作无法恢复，请谨慎操作</span>
		<view class="input">
			<input type="number" v-model="verifyCode" placeholder="请输入验证码" maxlength="6"
			placeholder-class="placeholder-class">
			<view class="" :style="verifyCodeSend?'background: #D9D9D9;color: #FFFFFF;':''" 
			@click="sendVerifyCode">获取验证码{{verifyCodeSend?'('+restTime+')':''}}</view>
		</view>
		<button :style="allowSubmit?'background: #08C8BD;color: #FFFFFF;':''">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNum:"180****0048",
				
				verifyCode:'',				//验证码
				verifyCodeSend:false,		//验证码是否发送？
				restTime:0,					//重发验证码剩余时间
				
				allowSubmit:false,			//允许提交？
			}
		},
		watch:{
			verifyCode(){
				if(this.verifyCode.length>=4){
					this.allowSubmit=true;
				}else{
					this.allowSubmit=false;
				}
			}
		},
		methods: {
			sendVerifyCode(){
				//发送验证码
				if(!this.verifyCodeSend){
					this.verifyCodeSend=true;
					this.restTime=60;
					
					let timer=setInterval(()=>{
						this.restTime--;
						if(this.restTime===0){
							this.verifyCodeSend=false;
							clearInterval(timer);
						}
					},1000)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		padding: 1px 0;
		background-color: #F3F7F8;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		
		>image{
			width: 112rpx;
			height: 112rpx;
			margin: 80rpx 0 24rpx;
		}
		>span{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #001A18;
		}
		.input{
			margin-top: 48rpx;
			display: flex;
			align-items: center;
			
			>input{
				width: 400rpx;
				height: 96rpx;
				padding: 0 32rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-right: 16rpx;
			}
			>view{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 10rpx;
				height: 92rpx;
				background: #08C8BD;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		
		>button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			margin-top: 96rpx;
			background: #EDEDED;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #656565;
		}
	}
</style>
